<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- js 实现三级联动 -->
    <form>
      <select id="province">
        <option value="-1">请选择</option>
      </select>
      <select id="city"></select>
      <select id="country"></select>
    </form>
    <script>
      // 数据通常由后台返回，结构如下：

      var citys = [
        { name: '北京', city: [{ name: '北京', area: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '平谷区', '怀柔区', '密云县', '延庆县'] }] },
        { name: '天津', city: [{ name: '天津', area: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '宁河县', '静海县', '蓟 县'] }] }
      ]
      // 获取省
      var province = document.getElementById('province')
      province.options[0] = new Option('请选择省', -1)
      // 获取市
      var city = document.getElementById('city')
      city.options[0] = new Option('请选择市', -1)
      // 获取县
      var county = document.getElementById('county')
      county.options[0] = new Option('请选择县', -1)
      citys.forEach(function (item, index) {
        // 添加省
        province.options[province.options.length] = new Option(item.name, index)
        // 给省绑定事件
        province.onchange = function () {
          // 获取选择的省
          var provinceValue = province.value
          // 首先清空市和区县
          city.options.length = 0
          city.options[city.options.length] = new Option('请选择市', -1)
          county.options.length = 0
          county.options[county.options.length] = new Option('请选择县', -1)
          // 判断是否是‘请选择’
          if (province.value !== '-1') {
            // 然后给对应的省添加市
            citys[provinceValue].city.forEach(function (item, index) {
              city.options[city.options.length] = new Option(item.name, index)
              // 给市绑定事件
              city.onchange = function () {
                // 获取选择的市
                var cityValue = city.value
                // 清空县
                county.options.length = 0
                county.options[county.options.length] = new Option('请选择县', -1)
                // 判断选择的市是否是‘请选择’
                if (cityValue !== '-1') {
                  // 设置市对应的县
                  citys[provinceValue].city[cityValue].area.forEach(function (item, index) {
                    county.options[county.options.length] = new Option(item, index)
                  })
                }
              }
            })
          }
        }
      })
    </script>
  </body>
</html>
